<template>
  <div class="header-bar">

    <sider-trigger :collapsed="collapsed" icon="md-menu" @on-change="handleCollpasedChange"></sider-trigger>
    <div style="margin-left: 20px;" class="custom-bread-crumb">
      <Menu mode="horizontal" active-name="1">
        <MenuItem v-if="index < 5"  v-for="(item ,index) in menuList" :name="item.name" >
          <div  @click="createChildrenList(menuList[index])">
            <Icon :type="item.icon"/>
            {{item.meta.title}}
          </div>
        </MenuItem>
        <Submenu v-if="menuList.length>=5" name="3">
          <template slot="title">
            <Icon type="ios-stats"/>
            更多
          </template>
          <MenuItem v-if="index >= 5" v-for="(item ,index) in menuList" :name="item.name" >
            <div @click="createChildrenList(menuList[index])">
              <Icon :type="item.icon"/>
              {{item.meta.title}}
            </div>
          </MenuItem>
        </Submenu>
      </Menu>
    </div>
    <div class="custom-content-con">
      <slot></slot>
    </div>
  </div>
</template>
<script>
  import siderTrigger from './sider-trigger'
  import customBreadCrumb from './custom-bread-crumb'
  import './header-bar.less'

  export default {
    name: 'HeaderBar',
    components: {
      siderTrigger,
      customBreadCrumb
    },
    props: {
      collapsed: Boolean,
      menuList: {
        type: Array,
        default() {
          return []
        }
      },

    },
    computed: {
      breadCrumbList() {
        return this.$store.state.app.breadCrumbList
      }
    },
    methods: {
      createChildrenList(row) {
        this.$emit('createChildren', row)
      },
      handleCollpasedChange(state) {
        this.$emit('on-coll-change', state)
      }
    }
  }
</script>
